import React, { lazy, Suspense } from 'react';
import { createBrowserRouter } from 'react-router-dom';

const RootLayout = lazy(() => import('@/app/layout'));
const RootPage = lazy(() => import('@/app/page'));
const RootErrorBoundary = lazy(() => import('@/app/root-error-boundary/page'));
const NoMatchPage = lazy(() => import('@/app/no-match/page'));
const ReactDocPage = lazy(() => import('@/app/react-doc/page'));
const ReactPdfPage = lazy(() => import('@/app/react-pdf/page'));
const HomePage = lazy(() => import('@/app/home/page'));
const PdfjsDistPage = lazy(() => import('@/app/pdfjs-dist'));
const PdfjsPage = lazy(() => import('@/app/pdfjs/page'));
const DocxPreviewPage = lazy(() => import('@/app/docx-preview/page'));

const router = createBrowserRouter([
    {
        path: '/',
        element: (
            <Suspense fallback={<>...</>}>
                <RootLayout />
            </Suspense>
        ),
        errorElement: (
            <Suspense fallback={<>...</>}>
                <RootErrorBoundary />
            </Suspense>
        ),
        children: [
            {
                index: true,
                element: (
                    <Suspense fallback={<>...</>}>
                        <RootPage />
                    </Suspense>
                ),
            },
            {
                path: 'react-pdf',
                element: (
                    <Suspense fallback={<>...</>}>
                        <ReactPdfPage />
                    </Suspense>
                ),
            },
            {
                path: 'home',
                element: (
                    <Suspense fallback={<>...</>}>
                        <HomePage />
                    </Suspense>
                ),
            },
            {
                path: 'react-doc',
                element: (
                    <Suspense fallback={<>...</>}>
                        <ReactDocPage />
                    </Suspense>
                ),
            },
            {
                path: 'pdfjs-dist',
                element: (
                    <Suspense fallback={<>...</>}>
                        <PdfjsDistPage />
                    </Suspense>
                ),
            },
            {
                path: 'pdfjs',
                element: (
                    <Suspense fallback={<>...</>}>
                        <PdfjsPage />
                    </Suspense>
                ),
            },
            {
                path: 'docx-preview',
                element: (
                    <Suspense fallback={<>...</>}>
                        <DocxPreviewPage />
                    </Suspense>
                ),
            },
        ],
    },
    {
        path: '*',
        element: (
            <Suspense fallback={<>...</>}>
                <NoMatchPage />
            </Suspense>
        ),
    },
]);
if ((import.meta as any).hot) {
    console.log('hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh');
    (import.meta as any).hot.dispose(() => router.dispose());
}
export default router;
